{include file="/common/vue3" /}

<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
      <div id="tabs">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClickTab">
          <el-tab-pane label="全局设置" name="first">
            <div class="txtCls">说明： 当全局设置，星期设置，日期设置都对当天的出租时间有作用时， 他们的权重为日期设置>星期设置>全局设置</div>
            <el-card class="tab-card">
              <template #header>
                <div class="card-header">
                  <span>生成器</span>
                </div>
              </template>
              <el-form label-width="auto" style="max-width: 800px">
                <el-form-item label="营业时间">
                  <el-slider v-model="times" range :step="0.5" show-stops :max="24" :format-tooltip="formatTime"/>
                </el-form-item>
                <el-form-item label="默认价格">
                  <el-input-number v-model="price" :step="1" step-strictly />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onCreateGlobal">生成</el-button>
                </el-form-item>
              </el-form>
            </el-card>
            <br />
            <el-card class="tab-card">
              <template #header>
                <div class="card-header">
                  <span>出租时间段和价格</span>
                </div>
              </template>
              <div>
                <el-row class="row-bg" v-for="(item,index) in inputs" :key="index">
                  <el-col :sm="4" :md="4" :lg="4" :xl="4">{{ item.start }}</el-col>
                  <el-col :sm="4" :md="4" :lg="4" :xl="4">{{ item.end }}</el-col>
                  <el-col :sm="6" :md="6" :lg="6" :xl="6">
                    <el-input-number
                      v-model="item.price"
                      :min="0"
                      :max="100"
                      controls-position="right"
                    />
                  </el-col>
                  <el-col :sm="8" :md="6" :lg="6" :xl="6">
                    <el-switch
                      v-model="item.is_open"
                      class="ml-2"
                      width="60"
                      inline-prompt
                      active-value="1"
                      inactive-value="0"
                      active-text="开放"
                      inactive-text="占用"
                      style="--el-switch-on-color: #409eff; --el-switch-off-color: #a2a2a2"
                    />
                  </el-col>
                </el-row>
                <el-row v-if="inputs.length===0">
                  <el-col :span="8"><font color=red>选择营业时间和输入默认价格生成</font></el-col>
                </el-row>
                <el-row v-if="inputs.length>0">
                  <el-col :span="6"><el-button type="primary" @click="onSubmit">保存全局设置</el-button></el-col>
                </el-row>
              </div>

            </el-card>
          </el-tab-pane>
          <el-tab-pane label="星期设置" name="second">
            <div class="txtCls1">说明： 当全局设置，星期设置，日期设置都对当天的出租时间有作用时， 他们的权重为日期设置>星期设置>全局设置</div>
            <div v-show="showWeekList">
              <el-row class="row-bg">
                <el-col :sm="6" :md="4" :lg="4" :xl="4">星期</el-col>
                <el-col :sm="6" :md="4" :lg="4" :xl="4">状态</el-col>
                <el-col :sm="6" :md="6" :lg="6" :xl="6">操作</el-col>
              </el-row>
              <el-row class="row-bg" v-for="(item,index) in weekList" :key="index">
                <el-col :sm="6" :md="4" :lg="4" :xl="4">{{ item.showName }}</el-col>
                <el-col :sm="6" :md="4" :lg="4" :xl="4">
                  <div v-if="item.isSet===0">未设置</div>
                  <div v-if="item.isSet===1">已设置</div>
                </el-col>
                <el-col :sm="6" :md="6" :lg="6" :xl="6">
                   <el-button type="danger" @click="onSetWeek(item.name)">设置</el-button>
                </el-col>
              </el-row>
            </div>
            <!-- 设置星期 -->
            <el-tabs v-show="showWeekSet" v-model="activeNameWeek" class="demo-tabs" @tab-click="handleClickTabWeek">
              <el-tab-pane v-for="item in weeks" v-model="activeNameWeek" :name="item.name" :key="item.name">
                <template #label>
                  <span class="custom-tabs-label">
                    <span>{{item.showName}}</span>
                    <el-icon v-if="item.isSet===1" color="red"><Timer /></el-icon>
                  </span>
                </template>
                <el-card class="tab-card">
                  <template #header>
                    <div class="card-header">
                      <span>生成器</span>
                    </div>
                  </template>
                  <el-form label-width="auto" style="max-width: 600px">
                    <el-form-item label="营业时间">
                      <el-slider v-model="timesWeek" range :step="0.5" show-stops :max="24" :format-tooltip="formatTimeWeek"/>
                    </el-form-item>
                    <el-form-item label="默认价格">
                      <el-input-number v-model="priceWeek" :step="1" step-strictly />
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onCreateWeek">生成</el-button>
                    </el-form-item>
                  </el-form>

                </el-card>
                <br />
                <el-card class="tab-card">
                  <template #header>
                    <div class="card-header">
                      <span>出租时间段和价格</span>
                    </div>
                  </template>
                  <div>
                    <el-row class="row-bg" v-for="(item,index) in inputsWeek" :key="index">
                      <el-col :sm="4" :md="4" :lg="4" :xl="4">{{ item.start }}</el-col>
                      <el-col :sm="4" :md="4" :lg="4" :xl="4">{{ item.end }}</el-col>
                      <el-col :sm="6" :md="6" :lg="6" :xl="6">
                        <el-input-number
                          v-model="item.price"
                          :min="0"
                          :max="100"
                          controls-position="right"
                        />
                      </el-col>
                      <el-col :sm="8" :md="6" :lg="6" :xl="6">
                        <el-switch
                          v-model="item.is_open"
                          class="ml-2"
                          width="60"
                          inline-prompt
                          active-value="1"
                          inactive-value="0"
                          active-text="开放"
                          inactive-text="占用"
                          style="--el-switch-on-color: #409eff; --el-switch-off-color: #a2a2a2"
                        />
                      </el-col>
                    </el-row>
                    <el-row v-show="Object.keys(inputsWeek).length === 0">
                      <el-col>任何变化包括出租时段为空，也请点击提交保存</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4"><el-button type="primary" @click="onSubmitWeek">提交</el-button></el-col>
                      <el-col :span="4" v-show="Object.keys(inputsWeek).length !== 0"><el-button type="primary" @click="onClearWeek">清除时段</el-button></el-col>
                    </el-row>
                  </div>
                </el-card>
                  
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="日期设置" name="third">
            <div class="txtCls">说明： 当全局设置，星期设置，日期设置都对当天的出租时间有作用时， 他们的权重为日期设置>星期设置>全局设置</div>
            <el-card class="tab-card">
              <template #header>
                <div class="card-header">
                  <span>基础选择</span>
                </div>
              </template>
              <el-form label-width="auto" style="max-width: 800px">
                <el-form-item label="日期选择">
                  <div>
                    <el-date-picker
                      id="startdate"
                      v-model="date1"
                      type="date"
                      placeholder="开始日期"
                      style="width:140px;"
                      value-format="YYYY-MM-DD"
                    />
                  </div>
                    &nbsp;-&nbsp;
                  <div>
                    <el-date-picker
                      id="enddate"
                      v-model="date2"
                      type="date"
                      placeholder="结束日期"
                      style="width:140px;"
                      value-format="YYYY-MM-DD"
                    />
                  </div>
                  <div id="err" style="margin-left:14px;color:red">
                  </div>
                </el-form-item>
                <el-form-item label="是否开放">
                  <el-switch v-model="open" active-value="1" inactive-value="0"/>
                </el-form-item>
              </el-form>
            </el-card>
            <br v-if="open==='1'" />
            <el-card class="tab-card" v-if="open==='1'">
              <template #header>
                <div class="card-header">
                  <span>生成器</span>
                </div>
              </template>
              <el-form label-width="auto" style="max-width: 800px">
                <el-form-item label="营业时间">
                  <el-slider v-model="timesDate" range :step="0.5" show-stops :max="24" :format-tooltip="formatTimeDate"/>
                </el-form-item>
                <el-form-item label="默认价格">
                  <el-input-number v-model="priceDate" :step="1" step-strictly />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onCreateDate">生成</el-button>
                </el-form-item>
              </el-form>

            </el-card>
            <br v-if="open==='1'" />
            <el-card class="tab-card" v-if="open==='1'">
              <template #header>
                <div class="card-header">
                  <span>出租时间段和价格</span>
                </div>
              </template>
              <div>
                <el-row class="row-bg" v-for="(item,index) in inputsDate" :key="index">
                  <el-col :sm="4" :md="4" :lg="4" :xl="4">{{ item.start }}</el-col>
                  <el-col :sm="4" :md="4" :lg="4" :xl="4">{{ item.end }}</el-col>
                  <el-col :sm="6" :md="6" :lg="6" :xl="6">
                    <el-input-number
                      v-model="item.price"
                      :min="0"
                      :max="100"
                      controls-position="right"
                    />
                  </el-col>
                  <el-col :sm="8" :md="6" :lg="6" :xl="6">
                    <el-switch
                      v-model="item.is_open"
                      class="ml-2"
                      width="60"
                      inline-prompt
                      active-value="1"
                      inactive-value="0"
                      active-text="开放"
                      inactive-text="占用"
                      style="--el-switch-on-color: #409eff; --el-switch-off-color: #a2a2a2"
                    />
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <br />
            <el-row class="tab-card">
              <el-col :span="6"><el-button type="primary" @click="onSubmitDate">提交</el-button></el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <input type="hidden" id="room_id" value="{$row.id}" />
    <textarea class="form-control hide" id="rent_time">{$row.rent_time}</textarea>
    <textarea class="form-control hide" id="week_rent_time">{$row.week_rent_time}</textarea>
    <textarea class="form-control hide" id="date_rent_time">{$row.date_rent_time}</textarea>
    <textarea class="form-control hide" id="date_setting">{$row.date_setting}</textarea>
</form>
<style>
    .mf_backend_field_note {
        display: block;
        margin-top: 0.5rem;
        color: #838fa1;
        font-size: 1.2rem;
    }
</style>
<style>
.el-row {
  margin-bottom: 10px;
}
.txtCls {
  padding-left: 10px;
  margin-bottom: 15px;
}
.txtCls1 {
  padding-left: 10px;
}
.demo-tabs {
  margin-left: 10px;
  margin-right: 10px;
}
.demo-tabs > .el-tabs__content {
  padding: 6px;
  color: #6b778c;
  font-size: 14px;
  font-weight: 600;
}
.demo-tabs > .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 10px;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.tab-card {
  margin-left: 10px;
  margin-right: 10px;
  max-width: 800px
}
</style>
